import './index.less';

interface IProps {
  isLast?: boolean;
  isFirst?: boolean;
  title?: JSX.Element | string;
  content: JSX.Element | string;
  height?: string;
  onEdit?: () => void;
}

const TimelineItem = (props: IProps) => {
  const {
    isLast = false,
    isFirst = false,
    content,
    title,
    height = '60px',
    onEdit = () => null,
  } = props;

  return (
    <div
      className={[
        'time-line-item',
        isLast ? 'time-line-item--last' : '',
        isFirst ? 'time-line-item--first' : '',
      ].join(' ')}
      style={{ height }}
    >
      {title && <div className="time-line-item__title">{title}</div>}
      <div className="time-line-item__indicator" onClick={onEdit}>
        <div className="time-line-item__indicator-item"></div>
      </div>
      <div className="time-line-item__content">{content}</div>
    </div>
  );
};

export default TimelineItem;
